<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="postCode" label="编码">
          <el-input
            v-model="queryParams.postCode"
            placeholder="角色名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item prop="status" label="状态">
          <el-select
            v-model="queryParams.status"
            placeholder="状态"
            class="!w-[200px]"
          >
            <el-option
              v-for="(item, index) in dict.type?.sys_sex"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="primary" plain icon="Plus" @click="handleEdit(null)"
          >新增</el-button
        >
        <el-button
          plain
          icon="Delete"
          :disabled="ids.length == 0"
          type="danger"
          @click="handleDelete(null)"
          >删除</el-button
        >
      </template>

      <el-table
        v-loading="loading"
        highlight-current-row
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="岗位编号" prop="postId" align="center" />
        <el-table-column label="岗位编码" prop="postCode" align="center" />
        <el-table-column label="岗位名称" prop="postName" align="center" />
        <el-table-column label="岗位排序" prop="postSort" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="primary">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" align="center" />

        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button
              icon="Edit"
              type="primary"
              link
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              icon="Delete"
              type="primary"
              link
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加或者编辑 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title">
      <el-form ref="formDataRef" :model="formData" :rules="rules">
        <el-form-item label="岗位名称" prop="postName">
          <el-input v-model="formData.postName" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="岗位编码" prop="postCode">
          <el-input v-model="formData.postCode" placeholder="请输入岗位编码" />
        </el-form-item>

        <el-form-item label="岗位顺序" prop="postSort">
          <el-input-number
            v-model="formData.postSort"
            :min="1"
            placeholder="请输入岗位顺序"
          />
        </el-form-item>

        <el-form-item label="岗位状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="Post">
// defineOptions({
//   name: "Post",
//   inheritAttrs: false,
// });

import { ref, reactive, onMounted } from "vue";

import { PostPageQuery, PostVO, PostFormVO } from "@/api/post/types";

import { getPostList, deletePostById, getPostById } from "@/api/post";

import { getDict } from "@/utils/dict";

const loading = ref(false);
const total = ref(0);
const ids = ref<number[]>([]);

const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);

const rules = reactive({});

const formData = reactive<PostFormVO>({
  status: "0",
  postSort: 1,
});
const dialog = reactive({
  visible: false,
  title: "",
});

const queryParams = reactive<PostPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const dataList = ref<PostVO[]>([]);

//methods
const handleQuery = () => {
  loading.value = true;
  getPostList(queryParams)
    .then(({ data }) => {
      total.value = data.total;
      dataList.value = data.list;
    })
    .finally(() => {
      loading.value = false;
    });
};
const resetQuery = () => {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
};

const handleSelectionChange = (selection: PostVO[]) => {
  ids.value = selection.map((item) => item.postId);
};

//新增编辑
const handleEdit = (info: PostVO | null) => {
  dialog.visible = true;
  dialog.title = info ? "编辑岗位" : "新增岗位";

  if (info?.postId) {
    getPostById(info.postId).then(({ data }) => {
      Object.assign(formData, data);
    });
  }
};

//删除
const handleDelete = (row: PostVO | null) => {
  const postIds = [row?.postId || ids.value].join(",");
  if (!postIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deletePostById(postIds).then(() => {
      ElMessage.success("删除成功");
      resetQuery();
    });
  });
};

const handleSubmit = () => {};

onMounted(() => {
  handleQuery();
});

const dict = getDict("sys_normal_disable", "sys_sex");
</script>
